<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        li,input{
            width: 800px;
            margin: 10px 0px;
            padding: 10px;
            border: 5px solid #f099;
            line-height: 15px;
        }
        #x1{
            width: 800px;
            margin: 10px;
            border: 5px solid #f099;
            line-height: 15px;
        }
    </style>
    <script scr="./jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            // 基本选择器
            // $('#list').css('border', '5px solid #f00'); // ID 选择器 边选中改变 id 样式
            // $('#list').css('background-color', '#abcdef');
            // $('#moba').css('border', '5px solid #f00'); // class 选择器
            // $('*').css('border', '5px solid blue'); //每一个标签都改变样式
            // $('li').css('border', '5px solid #f00');  // 被选中标签 所有标签改变样式
            // 层次选择器
            // $('#list li').css('border', '5px solid #f00'); //选中后代元素
            // $('#list>li').css('border', '5px solid #f00'); //选中 list 所有子元素
            // $('.moba+li').css('border', '5px solid #f00'); //选中下一个同辈元素
            // $('.moba~li').css('border', '5px solid #f00'); //选中所有同辈元素

            // $('#list li:first').css('border', '5px solid #f00'); // 首歌标签
            // $('#list li:last').css('border', '5px splid #f00'); //最后一个标签
            // $('#list li:eq(2)').css('border', '5px splid #f00'); //选择第几个标签
            // $('#list li:lt(3)').css('border', '5px solid #f00'); // 索引小于
            // $('#list li:gt(2)').css('border', '5px solid #f00'); // 索引大于
            // $('#list li:even').css('border', '5px solid #f00'); // 索引为偶数
            // $('#list li:odd').css('border', '5px solid #f00'); // 索引为奇数
            // $('#list li:header').css('border', '5px solid #f00'); // 所有 h 标签
            // $('#list li:not(last)').css('border', '5px solid #f00'); // 排除制定选择器选的元素
            // 表单选择器
            // $(':input') // 选择所有的 input 表单
            // $('form input:text').css('border', '5px solid red'); // 选中 text 表单
            // $('form input:button').css('border', '5px solid red'); // 选中 button 表单
            // $('form input:checkbox').css('border', '5px solid red'); // 选中 checkbox 表单
            // $('form input:image').css('border', '5px solid red'); // 选中image 表单
            // $('form input:password').css('border', '5px solid red'); // 选中 password 表单
            // $('form input:radio').css('border', '5px solid red'); // 选中 radio 表单
            // $('form input:reset').css('border', '5px solid red'); // 选中 reset 表单
            // $('form input:submit').css('border', '5px solid red'); //选中 submit 表单
            // $('form input:file').css('border', '5px solid red'); // 选中 file 表单

            // $("li:contains('shi')").css('border', '5px solid #f00'); // 选中指定文本
            // $("li:has('moba')").css('border', '5px solid #f00'); // 匹配含有选择器 所匹配的要求的元素
            // $("li:parent").css('border', '5px solid #f00'); // 能作为父级节点的元素
            // $("li:empty").css('border', '5px solid #f00'); // 不含有子元素和文本的空元素
            // $("li:hidden").css('border', '5px solid #f00'); // 所有不可见元素
            // $("li:visible").css('border', '5px solid #f00'); // 所有可见元素
            // $("imglist img[width]").css('border', '5px solid #f00'); // 选择指定属性的元素
            // $("imglist img[width='200']").css('border', '5px solid #f00'); //指定值 等于 value 的元素
            // $("imglist img[width='201']").css('border', '5px solid #f00'); //指定值 不等于 value 的元素
            // $("imglist img[alt^='m']").css('border', '5px solid #f00'); // 指定值以 value 开头的元素
            // $("imglist img[title$='1']").css('border', '5px solid #f00'); // 指定以 value 结尾的元素
            // $("imglist img[title*='g']").css('border', '5px solid #f00'); // 包含有 value 值得元素
            // $("img[width][width='200'][alt='m']").css('border', '5px solid #f00') // 多个属性选择器
            // $("imglist img:first-child").css('border', '5px solid f#00'); // 首个子元素
            // $("imglist img:last-child").css('border', '5px solid #f00'); // 最后一个元素
            // $("imglist img:nth-child(2)").css('border', '5px solid #f00'); // 第 2 个子元素
            // ("imglist img:only-child").css('border', '5px solid #f00'); // 元素中唯一一个子元素
            // $("input:enabled").css('border', '5px solid #f00'); // 匹配所有可用的表单元素
            // $("input:disabled").css('border', '5px solid #f00'); // 匹配所有不可用元素
            // $("input:check").css('border', '5px solid #f00'); // 匹配所用选中的表单元素
            // $("input:select").css('border', '5px solid #f00'); // 匹配所有选中的 option 元素
        })
    </script>
</head>
<body>
    
    <h1>JQ</h1>
    <form>
        <input type="button" value="Input Button">,
        <input type="checkbox">,

        <input type="file">,
        <input type="hidden">,
        <input type="image">,
        <input type="password">,
        <input type="radio">,
        <input type="reset">,

        <input type="submit">
        <input type="text">        
    </form>

    <div id="imglist">
        
    </div>
</body>
</html>